/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  list-style: none;
}
/* 设置默认样式 */
* {
  box-sizing: border-box;
}
input {
  background: none;
}

html {
  font-size: 14px;
  letter-spacing: 3px;
}
input:disabled {
  border: none !important;
  background: none !important;
  background-color: none;
}

body {
  background: linear-gradient(135deg, #686974, #25272c);
}

.bg-web {
  background-color: #17b2ff !important;
  /* transform: scale(1.1); */
}

.bg-android {
  background-color: #75be3d !important;
  /* transform: scale(1.1); */
}

.bg-java {
  background-color: #ff6756 !important;
  /* transform: scale(1.1); */
}

.bg-ios {
  background-color: #ff79a3 !important;
  /* s */
}

.err {
  color: #f85c4e;
}

div.tips.err {
  float: right;
}

div.errTips {
  position: relative;
}

div.errTips::after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.tips {
  text-align: end;
  font-size: 0.8rem;
  margin-bottom: -0.5rem;
}
.act-btn#next {
    margin-bottom: 0.5rem;
    
}

.hide {
  display: none !important;
}

.page-row {
  width: 100%;
}

/* input:-webkit-autofill {
  background: none !important;
  border-bottom: 2px solid #fff;
}

input::-ms-fill {
  background: none;
} */

.invisible {
  opacity: 0;
  -webkit-opacity: 0;
}

.gradual-line {
  /* 颜色渐变线 */
  width: 100%;
  background: linear-gradient(90deg, #ff0000, #00f7ff);
}

.contain {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #686974, #25272c);
  overflow: scroll;
  min-height: 500px;
  justify-content: center;
}

.box-position {
  position: relative;
}

.form-box {
  position: relative;
  width: 100%;
  margin: 3px;
  padding: 0 2rem;
  z-index: 1;
  /* box-shadow: #fff 0px 0px 10px; */
  border-radius: 1rem;
  color: #fff;
}

.center-text {
  text-align: center;
}

.head-text {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  animation: head-text 0.5s linear both;
}

.decorate-line .block {
  display: block;
  width: 30px;
  height: 8px;
}

.decorate-line {
  display: flex;
  width: 120px;
  height: 12px;
  margin-left: calc(50% - 60px);
  transform: skewX(-45deg);
  margin-bottom: 1rem;
}

.head {
  position: relative;
  background-color: #3e414700;
  width: 90%;
  border-radius: 1rem;
  padding: 2rem 0 1rem;
  margin: 0rem auto 0;
}

.text-box {
  margin-right: 0.5rem;
}

.dividing-line {
  display: flex;
  height: 2px;
  margin: 2rem 0;
}

.dividing-line .block {
  flex: auto;
  height: 2px;
}

.dividing-line > .bg-web {
  background: linear-gradient(90deg, #00a3f4, #ff6756);
}

.dividing-line > .bg-java {
  background: linear-gradient(90deg, #ff6756, #6ba143);
}

.dividing-line > .bg-android {
  background: linear-gradient(90deg, #6ba143, #ff6a9a);
}

/* .dividing-line>.bg-java {
  background: linear-gradient(90deg, #ff6756, #6ba143);
} */

.show-and-down-animation {
  animation: show-and-down 1s linear;
}

.select-input {
  display: block;
  width: 100%;
  height: 100%;
}

.act-btn {
  width: 85%;
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 3px;
  text-align: center;
  margin: 2rem auto 2rem;
  background-color: #515157;
  color: #fff;
  min-width: 310px;
  max-width: 500px;
  /* box-shadow: #fff 0 0 5px; */
}

.page-1 {
  margin-top: 2rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.input-group {
  margin: 1.5rem auto 2rem;
}

input::placeholder,textarea::placeholder{
  color: rgb(192, 192, 192);
}

.group-radio > label {
  font-size: 0.9rem;
  width: 4.2rem;
  padding: 0.4rem 0.2rem;
  flex-shrink: 1;
  margin: 0.2rem 0;
  min-width: 2.9rem;
  transition: background-color 0.2s;
  background: #58585a;
}

.input-box {
  position: relative;
  display: flex;
  text-align: start;
  flex-wrap: nowrap;
  margin: 0.75rem 0;
  background-color: #595a5f;
  color: #fff;
  padding: 0.4rem;
  border-radius: 4px;
  transition: border 0.3s;
}

.form-box {
  background: #515157;
  /* box-shadow: 3px 3px 0 #a1a1a1; */
  border-radius: 0;
}

.head {
  border-radius: 0;
}

.form-head-box {
  display: flex;
  justify-content: center;
  align-content: center;
  
}

.bd-err {
  border: 2px #ff3300 solid !important; 
}

.bd-focus {
  border: 2px #24a7ff solid; 
}

.input-bd {
  border: 2px #5a5b62 solid;
}

.form-head-box {
  background: inherit;
}

.form-head-text {
  position: absolute;
  background: inherit;
  top: 0;
  transform: translate(0, -50%);
  animation: text-border 10s linear both;
}



.form-head-text>span {
  background-color: inherit;
  position: relative;
  margin: 0.5rem auto 0;
  background-color: initial;
  font-size: 1.2rem;
  text-align: center;
  padding: 0.4rem;
  animation: bor-color 10s linear infinite both;
}
@keyframes bor-color {
  0% {
    border: 2px #ff79a3 solid;
  }
  10% {
    border: 2px #ff79a3 solid;
  }
  12.5% {
    border: 2px #00a3f4 solid;
  }
  35% {
    border: 2px #00a3f4 solid;
  }
  37.5% {
    border: 2px #75be3d solid;
  }
  60% {
    border: 2px #75be3d solid;
  }
  62.5% {
    border: 2px #ff6756 solid;
  }
  85% {
    border: 2px #ff6756 solid;
  }
  87.5% {
    border: 2px #ff79a3 solid;
  }
  100% {
    border: 2px #ff79a3 solid;
  }

}

.line {
  position: relative;
  top: 1rem;
  height: 2px;
  background-color: #fff;
  flex-grow: 1;
  margin: auto;
}

input {
  letter-spacing: 2px;
}

.group-radio {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
}

.tip {
  margin-top: 1.8rem;
}
.tip>span>.star {
  color: red;
}




.textarea-why {
  width: 100%;
  resize: none;
  background-color: inherit;
  font-size: 14px;
  letter-spacing: 1px;
  height: 5em;
  color: inherit;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.input-box > .choose-time {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  top: 0;
  left: 0;
  /* border-radius: 5rem; */
  min-width: 5rem;
  /* margin-left: 1rem; */
}

.time-ico {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 2.3rem;
  transform: scale(0.9) rotate(180deg);
}

#input-groups-box {
  display: flex;
  flex-direction: column;
  margin-top: -0.5rem;
  background: none;
}

.input-box:nth-child(-n + 4) {
  flex-wrap: nowrap;
}

.input-box > input,
#time {
  flex-grow: 1;
  flex-shrink: 1;
  background-color: #fbfbfb00;
  /* border-bottom: 1px solid #fff; */
  color: inherit;
}

.input-box > .text-box {
  flex-shrink: 0;
}

input:last-child {
  text-align: left;
}

.position-ele {
  position: relative;
  -webkit-position: relative;
}

label.position-ele {
  background: none;
  /* border: 1px solid #ffffff; */
}

label.position-ele.select {
  background-color: none;
}

label.position-ele > span {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.8rem;
  line-height: 100%;
}

label.position-ele > select {
  border: none;
  position: absolute;
  -webkit-position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

label.position-ele > select > option {
  color: #000;
}

.input-box > span {
  flex-shrink: 0;
}

input {
  font-size: 0.9rem;
  padding: 0.2rem;
}

select {
  font-size: 0.8rem;
}

.text-box {
  display: flex;
}

.none {
  position: absolute;
  left: -0.8rem;
}

input.err {
  border-bottom: 2px solid #ff0000;
}

.disapper {
  animation: disappear 0.2s linear forwards;
  -webkit-animation: disappear 0.2s linear forwards;
  -moz-animation: disappear 0.2s linear forwards;
  -ms-animation: disappear 0.2s linear forwards;
}

.show {
  animation: show 0.2s linear forwards;
  -webkit-animation: show 0.2s linear forwards;
  -moz-animation: show 0.2s linear forwards;
  -ms-animation: show 0.2s linear forwards;
}

input:disabled {
  background-color: #ffffff9a;
}

.wrap {
  flex-wrap: wrap;
}

input {
  min-width: 0;
}
.an-border-box {
  display: flex;
  position: relative;
  width: 85%;
  max-width: 500px;
  min-width: 310px;
  margin: 0 auto;
}

input:focus {
  text-align: left;
}
input {
  text-align: center;
}

.web-border-animation {
  position: absolute;
  height: 0;
  border: 3px #00a3f4 solid;
  width: 0;
  animation: web-border 10s linear infinite both;
  transform: scale(1);
  transform: left top;
}

.an-border-animation {
  position: absolute;
  height: 0;
  width: 0;
  border:3px solid #6ba143;
  animation: an-border 10s linear infinite both;
  transform: scale(1);
  transform: left top;
}

.ios-border-animation {
  position: absolute;
  height: 0;
  width: 0;
  border: 3px #ff6a9a solid;
  animation: ios-border 10s linear infinite both;
  transform: scale(1);
  transform: left top;
}
.java-border-animation {
  position: absolute;
  height: 0;
  width: 0;
  border: 3px #ff6756 solid;
  animation: java-border 10s linear infinite both;
  transform: scale(1);
  transform: left top;
}

.circle {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: fixed;
}

.circle1 {
  left: 0px;
  bottom: 40px;
}

.circle2 {
  left: calc(100vw - 18px);
  bottom: 40px;
}

.circle3 {
  left: 40px;
  bottom: 0px;
}

.circle4 {
  left: calc(100vw - 40px - 18px);
  bottom: 0px;
}

.time-input-box {
  flex-wrap: wrap;
}


@keyframes web-border {
  0% {
    width: 0;
    height: 100%;
    border-left: 3px #00a3f4 solid;
    border-top: 3px #00a3f4 solid;
    border-right: none;
    border-bottom: none;
    top: auto;
    right: auto;
    bottom: auto;
    left: 0;
  }
  24.9% {
    width: 100%;
    height: 0;
    border-left: 3px #00a3f4 solid;
    border-top: 3px #00a3f4 solid;
    border-right: none;
    border-bottom: none;
    top: auto;
    right: auto;
    bottom: auto;
    left: 0;
  }
  25% {
    width: 100%;
    height: 0px;
    border-left: none;
    border-top: 3px #00a3f4 solid;
    border-right: 3px #00a3f4 solid;
    border-bottom: none;
    top: auto;
    right: 0;
    bottom: auto;
    left: auto;
  }

  49.9% {
    width: 0px;
    height: 100%;
    border-left: none;
    border-top: 3px #00a3f4 solid;
    border-right: 3px #00a3f4 solid;
    border-bottom: none;
    top: auto;
    right: 0;
    bottom: auto;
    left: auto;
  }
  50% {
    width: 0px;
    height: 100%;
    border-left: none;
    border-top: none;
    border-right: 3px #00a3f4 solid;
    border-bottom: 3px #00a3f4 solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }
  74.9% {
    width: 100%;
    height: 0px;
    border-left: none;
    border-top: none;
    border-right: 3px #00a3f4 solid;
    border-bottom: 3px #00a3f4 solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }
  75% {
    width: 100%;
    height: 0px;
    border-left: 3px #00a3f4 solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #00a3f4 solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
  99.9% {
    width: 0px;
    height: 100%;
    border-left: 3px #00a3f4 solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #00a3f4 solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
  100% {
    width: 0;
    height: 100%;
    border-left: 3px #00a3f4 solid;
    border-top: none;
    border-right: none;
    border-bottom: none;
    top: auto;
    right: auto;
    bottom: auto;
    left: 0;
  }
}


@keyframes ios-border {
  0% {
    width: 100%;
    height: 0;
    border-left: none;
    border-top: 3px #ff6a9a solid;
    border-right: 3px #ff6a9a solid;
    border-bottom: none;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
  }
  24.9% {
    width: 0;
    height: 100%;
    border-left: none;
    border-top: 3px #ff6a9a solid;
    border-right: 3px #ff6a9a solid;
    border-bottom: none;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
  }
  25% {
    width: 0;
    height: 100%;
    border-left: none;
    border-top: none;
    border-right: 3px #ff6a9a solid;
    border-bottom: 3px #ff6a9a solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }

  49.9% {
    width: 100%;
    height: 0;
    border-left: none;
    border-top: none;
    border-right: 3px #ff6a9a solid;
    border-bottom: 3px #ff6a9a solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }
  50% {
    width: 100%;
    height: 0;
    border-left: 3px #ff6a9a solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #ff6a9a solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
  74.9% {
    width: 0;
    height: 100%;
    border-left: 3px #ff6a9a solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #ff6a9a solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
  75% {
    width: 0;
    height: 100%;
    border-left: 3px #ff6a9a solid;
    border-top: 3px #ff6a9a solid;
    border-right: none;
    border-bottom: none;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }
  99.9% {
    width: 100%;
    height: 0;
    border-left: 3px #ff6a9a solid;
    border-top: 3px #ff6a9a solid;
    border-right: none;
    border-bottom: none;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }
  100% {
    width: 100%;
    height: 0;
    border-left: none;
    border-top: 3px #ff6a9a solid;
    border-right: 3px #ff6a9a solid;
    border-bottom: none;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
  }
}

@keyframes java-border {
  0% {
    width: 0;
    height: 100%;
    border-left: none;
    border-top: none;
    border-right: 3px #ff6756 solid;
    border-bottom: 3px #ff6756 solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }
  24.9% {
    width: 100%;
    height: 0;
    border-left: none;
    border-top: none;
    border-right: 3px #ff6756 solid;
    border-bottom: 3px #ff6756 solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }
  25% {
    width: 100%;
    height: 0px;
    border-left: 3px #ff6756 solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #ff6756 solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }

  49.9% {
    width: 0;
    height: 100%;
    border-left: 3px #ff6756 solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #ff6756 solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
  50% {
    width: 0px;
    height: 100%;
    border-left: 3px #ff6756 solid;
    border-top: 3px #ff6756 solid;
    border-right: none;
    border-bottom: none;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }
  74.9% {
    width: 100%;
    height: 0px;
    border-left: 3px #ff6756 solid;
    border-top: 3px #ff6756 solid;
    border-right: none;
    border-bottom: none;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }
  75% {
    width: 100%;
    height: 0px;
    border-left: none;
    border-top: 3px #ff6756 solid;
    border-right: 3px #ff6756 solid;
    border-bottom: none;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
  }
  99.9% {
    width: 0px;
    height: 100%;
    border-left: none;
    border-top: 3px #ff6756 solid;
    border-right: 3px #ff6756 solid;
    border-bottom: none;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
  }
  100% {
    width: 0;
    height: 100%;
    border-left: none;
    border-top: none;
    border-right: 3px #ff6756 solid;
    border-bottom: 3px #ff6756 solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }
}

@keyframes an-border {
  0% {
    width: 100%;
    height: 0;
    border-left: 3px #6ba143 solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #6ba143 solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
  24.9% {
    width: 0;
    height: 100%;
    border-left: 3px #6ba143 solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #6ba143 solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
  25% {
    width: 0;
    height: 100%;
    border-left: 3px #6ba143 solid;
    border-top: 3px #6ba143 solid;
    border-right: none;
    border-bottom: none;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }

  49.9% {
    width: 100%;
    height: 0;
    border-left: 3px #6ba143 solid;
    border-top: 3px #6ba143 solid;
    border-right: none;
    border-bottom: none;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }
  50% {
    width: 100%;
    height: 0;
    border-left: none;
    border-top: 3px #6ba143 solid;
    border-right: 3px #6ba143 solid;
    border-bottom: none;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
  }
  74.9% {
    width: 0;
    height: 100%;
    border-left: none;
    border-top: 3px #6ba143 solid;
    border-right: 3px #6ba143 solid;
    border-bottom: none;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
  }
  75% {
    width: 0;
    height: 100%;
    border-left: none;
    border-top: none;
    border-right: 3px #6ba143 solid;
    border-bottom: 3px #6ba143 solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }
  99.9% {
    width: 100%;
    height: 0;
    border-left: none;
    border-top: none;
    border-right: 3px #6ba143 solid;
    border-bottom: 3px #6ba143 solid;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
  }
  100% {
    width: 100%;
    height: 0;
    border-left: 3px #6ba143 solid;
    border-top: none;
    border-right: none;
    border-bottom: 3px #6ba143 solid;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }
}

@keyframes show-and-down {
  0% {
    top: -1rem;
    color: #ffffff00;
  }
  100% {
    top: 0;
    color: #ffffff;
  }
}

@keyframes disappear {
  0% {
  }
  100% {
    -webkit-opacity: 0;
    opacity: 0;
    /* -moz-opacity: 0%;
    -khtml-opacity: 0%;
    filter:alpha(opacity=0); */
  }
}

@keyframes show {
  0% {
    -webkit-opacity: 0;
    opacity: 0;
    /* -moz-opacity: 0%;
    -khtml-opacity: 0%;
    filter:alpha(opacity=0) */
  }
  100% {
    -webkit-opacity: 1;
    opacity: 1;
    /* -moz-opacity: 100%;
    -khtml-opacity: 100%;
    filter:alpha(opacity=100) */
  }
}

@keyframes head-text {
  0% {
    top: -1rem;
    opacity: 0;
  }
  50% {
   
  }
  100% {
    top: 0;
    opacity: 1;
  }
}